<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>KW43-jq购物车效果2</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/cart.css" />
</head>

<body>
    <div id="main" class="hander-car">
        <div class="store-content">
            <div class="cart-box">
                <div class="title">
                    <h2>购物清单</h2>
                </div>
                <div class="cart-inner">
                    <div>
                        <div class="cart-table-title">
                            <span class="name">商品信息</span>
                            <span class="operation">操作</span>
                            <span class="subtotal">小计</span>
                            <span class="num">数量</span>
                            <span class="price">单价</span>
                        </div>
                        <div class="cart-table">
                            <div class="cart-group">
                                <!--购物列表-->
                                <div class="cart-top-items">
                                    <div class="cart-items">
                                        <div class="items-choose">
                                            <!-- 勾选商品  选中：checkbox-on -->
                                            <span class="blue-checkbox-new"><a></a></span>
                                        </div>
                                        <div class="items-thumb">
                                            <img src="./img/goods/s1.jpg">
                                            <a href="javascript:;" target="_blank"></a>
                                        </div>
                                        <div class="name hide-row">
                                            <div class="name-table">
                                                <a href="javascript:;" target="_blank">坚果 Pro 钢化玻璃手感膜 无孔 （后壳用）</a>
                                                <ul class="attribute">
                                                    <li>透明</li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="operation">
                                        </div>
                                        <!-- 小计 -->
                                        <div class="subtotal">¥ 49.00</div>
                                        <!-- 件数的操作 -->
                                        <div class="item-cols-num">
                                            <div class="select js-select-quantity">
                                                <span class="down down-disabled">-</span>
                                                <span class="num">
                                                    <input type="text" value="1" style="display: inline-block;">
                                                </span>
                                                <span class="up">+</span>

                                            </div>
                                        </div>
                                        <!-- 单价 -->
                                        <div class="price">¥ 100.00</div>
                                    </div>
                                </div>
                                <div class="cart-top-items">
                                    <div class="cart-items">
                                        <div class="items-choose">
                                            <span class="blue-checkbox-new"><a></a></span>
                                        </div>
                                        <div class="items-thumb">
                                            <img src="./img/goods/s1.jpg">
                                            <a href="javascript:;" target="_blank"></a>
                                        </div>
                                        <div class="name hide-row">
                                            <div class="name-table">
                                                <a href="javascript:;" target="_blank">坚果 Pro 钢化玻璃手感膜 无孔 （后壳用）</a>
                                                <ul class="attribute">
                                                    <li>透明</li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="operation">
                                        </div>
                                        <div class="subtotal">¥ 49.00</div>
                                        <div class="item-cols-num">
                                            <div class="select js-select-quantity">
                                                <span class="down down-disabled">-</span>
                                                <span class="num">
                                                    <input type="text" value="1" style="display: inline-block;">
                                                </span>
                                                <span class="up">+</span>

                                            </div>
                                        </div>
                                        <div class="price">¥ 200</div>
                                    </div>
                                </div>
                                <div class="cart-top-items">
                                    <div class="cart-items">
                                        <div class="items-choose">
                                            <span class="blue-checkbox-new"><a></a></span>
                                        </div>
                                        <div class="items-thumb">
                                            <img src="./img/goods/s1.jpg">
                                            <a href="javascript:;" target="_blank"></a>
                                        </div>
                                        <div class="name hide-row">
                                            <div class="name-table">
                                                <a href="javascript:;" target="_blank">坚果 Pro 钢化玻璃手感膜 无孔 （后壳用）</a>
                                                <ul class="attribute">
                                                    <li>透明</li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="operation">
                                        </div>
                                        <div class="subtotal">¥ 49.00</div>
                                        <div class="item-cols-num">
                                            <div class="select js-select-quantity">
                                                <span class="down down-disabled">-</span>
                                                <span class="num">
                                                    <input type="text" value="10" style="display: inline-block;">
                                                </span>
                                                <span class="up">+</span>

                                            </div>
                                        </div>
                                        <div class="price">¥ 49.01</div>
                                    </div>
                                </div>
                                <div class="cart-top-items">
                                    <div class="cart-items">
                                        <div class="items-choose">
                                            <span class="blue-checkbox-new"><a></a></span>
                                        </div>
                                        <div class="items-thumb">
                                            <img src="./img/goods/s1.jpg">
                                            <a href="javascript:;" target="_blank"></a>
                                        </div>
                                        <div class="name hide-row">
                                            <div class="name-table">
                                                <a href="javascript:;" target="_blank">坚果 Pro 钢化玻璃手感膜 无孔 （后壳用）</a>
                                                <ul class="attribute">
                                                    <li>透明</li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="operation">
                                        </div>
                                        <div class="subtotal">¥ 49.00</div>
                                        <div class="item-cols-num">
                                            <div class="select js-select-quantity">
                                                <span class="down down-disabled">-</span>
                                                <span class="num">
                                                    <input type="text" value="2" style="display: inline-block;">
                                                </span>
                                                <span class="up">+</span>

                                            </div>
                                        </div>
                                        <div class="price">¥ 58.00</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="cart-bottom-bg fix-bottom">
                    <div class="cart-bar-operation">
                        <div>
                            <div class="choose-all js-choose-all">
                                <span class="blue-checkbox-new" id="chooseall"><a></a></span>
                                全选
                            </div>
                            <!-- <div class="delete-choose-goods">删除选中的商品</div> -->
                        </div>
                    </div>
                    <div class="shipping">
                        <div class="shipping-box">
                            <div class="shipping-total shipping-num">
                                <h4 class="">
                                    已选择 <i id="yixuan">0</i> 件商品
                                </h4>
                                <h5>
                                    共计 <i id="gongji">0</i> 件商品
                                </h5>
                            </div>
                            <div class="shipping-total shipping-price">
                                <h4 class="">
                                    应付总额：<span>￥</span><i class="moneyall">0</i>
                                </h4>
                                <h5 class="shipping-tips">
                                    应付总额不含运费
                                </h5>

                            </div>
                        </div>
                        <span class="jianguo-blue-main-btn big-main-btn js-checkout disabled-btn"><a>现在结算</a></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src='https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js'></script>
    <script>

        // 全选-是否高亮
        function chooseAll() {
            let isAllChoose = $.makeArray($('.cart-group .blue-checkbox-new')).every(item => $(item).hasClass('checkbox-on'))
            if (isAllChoose) {
                $('#chooseall').addClass('checkbox-on');
            } else {
                $('#chooseall').removeClass('checkbox-on');
            }
        }

        // 现在结算-是否高亮
        function jiesuanBtn() {
            let isOneChoose = $.makeArray($('.cart-group .blue-checkbox-new')).some(item => $(item).hasClass('checkbox-on'))
            if (isOneChoose) {
                $('.js-checkout').removeClass('disabled-btn');
            } else {
                $('.js-checkout').addClass('disabled-btn');
            }
        }

        // 单选按钮的点击事件
        $('.cart-group .blue-checkbox-new').click(function (e) {
            e.preventDefault();
            $(this).toggleClass('checkbox-on');

            chooseAll();
            jiesuanBtn()

            checkOut()
        });

        // 全选按钮的单击事件
        $('#chooseall').click(function (e) {
            e.preventDefault();
            $(this).toggleClass('checkbox-on');
            if ($(this).hasClass('checkbox-on')) {
                $('.cart-group .blue-checkbox-new').addClass('checkbox-on')
            } else {
                $('.cart-group .blue-checkbox-new').removeClass('checkbox-on')
            }
            jiesuanBtn()
            checkOut() 
        });


        // 初始化
        function init() {
            $('.num input').each(function (index, item) {

                if (item.value === '10') {
                    $('.up').eq(index).addClass('up-disabled')
                } else {
                    $('.up').eq(index).removeClass('up-disabled')
                }
                if (item.value === '1') {
                    $('.down').eq(index).addClass('down-disabled')
                } else {
                    $('.down').eq(index).removeClass('down-disabled')
                }

                // 单价
                let price = $('.cart-group .price').eq(index).html().slice(1).trim()
                // 小计
                $('.cart-group .subtotal').eq(index).html('￥' + (price * item.value).toFixed(2))

            });
        }
        init()


        // 共计
        function totalNum() {
            let sum = 0;
            $('.num input').each(function (index, item) {
                sum += parseFloat(item.value)
            });
            $('#gongji').html(sum);
        }
        totalNum();



        // 加
        $('.up').click(function (e) {
            e.preventDefault();
            let index = $('.up').index(this);
            let text = $('.num input').eq(index).val();
            text++
            if (text >= 10) {
                text = 10;
                $(this).addClass('up-disabled')
            }
            if (text > 1) {
                $('.down').eq(index).removeClass('down-disabled')
            }
            $('.num input').eq(index).val(text)

            // 单价
            let price = $('.cart-group .price').eq(index).html().slice(1).trim()

            // 小计
            $('.cart-group .subtotal').eq(index).html('￥' + (price * text).toFixed(2))


            totalNum();
            checkOut() 
        });

        // 减
        $('.down').click(function (e) {
            e.preventDefault();
            let index = $('.down').index(this);
            let text = $('.num input').eq(index).val();
            text--
            if (text <= 1) {
                text = 1;
                $(this).addClass('down-disabled')
            }
            if (text < 10) {
                $('.up').eq(index).removeClass('up-disabled')
            }
            $('.num input').eq(index).val(text)

            // 单价
            let price = $('.cart-group .price').eq(index).html().slice(1).trim()

            // 小计
            $('.cart-group .subtotal').eq(index).html('￥' + (price * text).toFixed(2))

            totalNum();
            checkOut() 
        });



        // 已选+应付
        function checkOut() {
            let yxNum = 0;
            let yfPrice = 0;
            $('.cart-group .blue-checkbox-new').each(function (index, item) {
                if (item.classList.contains('checkbox-on')) {
                    yxNum += parseInt($('.num input').eq(index).val())
                    // 单价
                    let price = $('.cart-group .price').eq(index).html().slice(1).trim()
                    // 小计
                    let totalPrice = (price * $('.num input').eq(index).val())
                    yfPrice += totalPrice;
                }
            });
            $('#yixuan').html(yxNum);
            $('.moneyall').html(yfPrice.toFixed(2));
        }

        /**
         选中: checkbox-on
         结算按钮样式: disabled-btn
         加减按钮禁用：down-disabled
         */
    </script>
</body>

</html>